<template>
  <Modal v-model="show" title="设置保存路径">
    <div class="save-path-dialog">
      <p class="dialog-message">请选择视频转换后的保存位置</p>

      <div class="path-input-group">
        <input
          type="text"
          class="path-input"
          placeholder="选择保存路径"
          v-model="localPath"
          readonly
        />
        <button class="secondary-btn browse-btn" @click="browsePath" :disabled="isSelectingPath">
          <div v-if="isSelectingPath" class="i-carbon-circle-dash mr-2 animate-spin"></div>
          <div v-else class="i-carbon-folder mr-2"></div>
          {{ isSelectingPath ? '选择中...' : '浏览' }}
        </button>
      </div>
    </div>

    <template #footer>
      <button class="secondary-btn" @click="cancelPath">取消</button>
      <button class="primary-btn" @click="confirmPath" :disabled="!localPath"> 确认 </button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import Modal from './common/Modal.vue'
  import { useSelectFilePath } from '../hooks/useSelectPath'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    savedPath: {
      type: String,
      default: ''
    }
  })

  const emit = defineEmits(['update:modelValue', 'path-selected'])

  const show = ref(props.modelValue)
  const localPath = ref(props.savedPath || '')

  // 使用文件路径选择hook
  const { isSelectingPath, selectPath } = useSelectFilePath({
    defaultPath: props.savedPath,
    onPathSelected: (path) => {
      localPath.value = path
    },
    onError: (error) => {
      console.error('文件路径选择错误:', error.message)
    }
  })

  // 监听外部modelValue变化
  watch(
    () => props.modelValue,
    (val) => {
      show.value = val
    }
  )

  // 监听内部show变化
  watch(
    () => show.value,
    (val) => {
      emit('update:modelValue', val)
    }
  )

  // 监听外部path变化
  watch(
    () => props.savedPath,
    (val) => {
      localPath.value = val || ''
    }
  )

  // 浏览文件夹
  const browsePath = async () => {
    try {
      const selectedPath = await selectPath()
      if (selectedPath) {
        localPath.value = selectedPath
      }
    } catch (error) {
      console.error('选择路径失败:', error)
    }
  }

  // 取消选择
  const cancelPath = () => {
    show.value = false
  }

  // 确认选择
  const confirmPath = () => {
    if (localPath.value) {
      emit('path-selected', {
        path: localPath.value
      })
      show.value = false
    }
  }
</script>

<style lang="scss" scoped>
  .save-path-dialog {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .dialog-message {
    margin: 0;
    font-size: 0.95rem;
    color: #4b5563;
  }

  .path-input-group {
    display: flex;
    gap: 0.5rem;
  }

  .path-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    color: #1f2937;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }

    &[readonly] {
      cursor: default;
      background-color: #f9fafb;
    }
  }

  .browse-btn {
    white-space: nowrap;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
  }

  .options-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .option {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #4b5563;
  }
</style>
